<!--
 * @Author: hifishroom
 * @Date: 2021-08-24 15:29:37
 * @LastEditTime: 2021-08-30 14:50:47
 * @FilePath: \backstage\src\components\content\header\Header.vue
-->
<template>
  <div class="header">
    <div class="logo">
      <div class="logo-box">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170930%2F7b5c29e003164aaf976403241b18999c.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632494500&t=0c7cb2a74ecefd81b5392e4d4ff93c9f"
          alt=""
        />
        <span>中华人民解放军</span>
      </div>
    </div>
    <div class="page">
      <router-link to="/">首页</router-link>
      <router-link to="/property/all">座落资产</router-link>
      <router-link to="/map">地图展示</router-link>
      <router-link to="/background">后台</router-link>
    </div>
    <div class="flex-grow nav-user"></div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.header {
  position: fixed;
  width: 100%;
  height: 59px;
  top: 0px;
  display: flex;
  background-color: #fff;
  box-shadow: 0 0 10px rgb(240, 232, 232);
  z-index: 9999;
  .logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 220px;
    img {
      width: 80px;
      height: 40px;
    }
    span {
      line-height: 2;
      margin-left: 10px;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .page {
    display: flex;
    justify-content: space-around;
    min-width: 1140px;
    a {
      text-align: center;
      display: block;
      color: #6592be;
      font-size: 18px;
      padding: 0.85rem 1rem;
      letter-spacing: 4px;
      border-bottom: 4px solid transparent;
      transition: all 0.4s;
      &.router-link-exact-active {
        color: #1684f1;
        border-bottom: 4px solid #409eff;
      }
    }
    :hover {
      color: #1686f6;
      border-bottom: 4px solid #409eff;
    }
  }
}

.nav-user {
  margin-right: 20px;
  flex: 1;
  min-width: 220px;
}
</style>
